<template>
  <custom-page :disable="disable">
    <view>
      <view style="padding: 0 20rpx;background-color: #fff;">
        <u-cell-group
            :border="false" v-if="detail != ''">
          <u-cell  title="房号" :value="detail.room.building_name + detail.room.building_num + detail.room.name"
                   :titleStyle="{'font-size':'38rpx'}"
                   :rightIconStyle="{'font-size':'30rpx'}"
          ></u-cell>
          <u-cell  title="业主" :value="detail.User.real_name" :border="false"
                   :titleStyle="{'font-size':'38rpx'}"
                   :rightIconStyle="{'font-size':'30rpx'}"
          ></u-cell>
        </u-cell-group>
      </view>
      <view style="padding: 0 20rpx;background-color: #fff;margin-top: 20px;" v-if="disable">
        <u-cell-group
            :border="false">
          <u-cell
              :border="false"
              size="large"
              title="历史缴费"
              :titleStyle="{'font-size':'38rpx'}"
              :rightIconStyle="{'font-size':'30rpx'}"
              isLink
			  @click="goPayList"
			  v-if="id == ''"
          ></u-cell>
        </u-cell-group>
      </view>
      <view style="padding: 0 20rpx;background-color: #fff;margin-top: 20px;" v-if="detail != ''">
        <u-cell-group
            :border="false">
          <u-cell
              size="large"
              :title="detail.fee_date"
              :titleStyle="{'font-size':'38rpx'}"
              value="元"
              :border="false"
          ></u-cell>
          <u-cell
              :border="false"
              title="水费"
              :value="detail.water_price"
          ></u-cell>
          <u-cell
              :border="false"
              title="电费"
              :value="detail.electricity_price"
          ></u-cell>
          <u-cell
              :border="false"
              title="租金"
              :value="detail.room_price"
          ></u-cell>
          <u-cell
              :border="false"
              title="物业费"
              :value="detail.property_price"
          ></u-cell>
         <!-- <u-cell
              :border="false"
              title="停车费"
              value="200"
          ></u-cell> -->
          <u-cell
              :border="false"
              title="总缴费"
              :value="detail.fee"
          ></u-cell>
        </u-cell-group>
      </view>
      <view style="display: flex;align-items: center;justify-content: space-between;margin-top: 20rpx;" v-if="detail != '' && detail.status == 0 ">
            <view style="margin-left: 40rpx;flex:1;">
              应缴合计：<span style="font-size: 40rpx;color: red;">{{detail.fee}}</span>
            </view>
			<!-- <view style="display: flex;flex-direction: column;"> -->
            <u-button type="success" style="width: 200rpx;margin-right: 17px;" @click="createOrder">立即缴费</u-button>
			
			<!-- </view> -->
      </view>
	  <view style="display: flex;align-items: center;justify-content: space-between;margin-top: 20rpx;" v-if="detail != '' && detail.status == 0 ">
	  <u-button type="primary" style="width: 200rpx;margin-right: 17px;" v-if="type == 'wx'" @click="show = true" >支付宝缴费</u-button>
	  </view>
	  <u-overlay :show="show" @click="show = false">
	  		<view class="warp">
	  			<!-- <view class="rect" @tap.stop></view> -->
				<u--image :showLoading="true" :src="src" width="400rpx" height="400rpx" @click="click"></u--image>
				<view class="warp_text" style="margin-top: 20rpx;">长按可以保存二维码</view>
				<view class="warp_text">请用支付宝扫描二维码进行缴费</view>
	  		</view>
	  	</u-overlay>
		
		<view v-if="detail.length == 0 && type == 'alipay'" class="frame">当前没有待支付缴费单</view>
<!--      <u-tabbar-->
<!--          :fixed="true"-->
<!--          :placeholder="true"-->
<!--          :safeAreaInsetBottom="true"-->
<!--          style="height: 300rpx;text-align: center;line-height: 100rpx;"-->

<!--      >-->
<!--        <view style="margin-left: 40rpx;">-->
<!--          应缴合计：<span style="font-size: 40rpx;color: red;">￥2100</span>-->
<!--        </view>-->
<!--        <u-button type="primary" style="width: 200rpx;margin-top: 20rpx;">立即缴费</u-button>-->
<!--      </u-tabbar>-->
    </view>
  </custom-page>
</template>

<script>
	import Api from '@/util/api.js'
	export default {
	  data() {
	    return {
			userInfo:'',		 	//用户详情
			detail:{				//缴费详情
				room:{},
				User:{}
			},			
			id:'',
			type:'wx',					//当前支付的类型
			disable:true,				//是否显示导航栏
			show:false,					//遮罩
			src:'../../static/image/Alipay.png'
		}
		},
		onLoad(e) {
			var that = this
			console.log('获取传参',e.id)
			if(e.id == undefined){
				that.id = ''
			}else{
				that.id = e.id
			}
			if('type' in e){
				that.type = e.type
				that.disable = false
			}
			
			that.checkUser()
			that.getUserRecord()
		},
		methods:{
			// 检查用户信息
			checkUser(){
				var that  = this
				var userInfo = that.userInfo;
					if(localStorage.getItem('userInfo')){
						that.userInfo = JSON.parse(localStorage.getItem('userInfo'))
					}else{
						uni.showToast({
						    icon: 'none',   
						    duration: 3000,
						    title: "当前用户未登录"
						});
						return;
					}
			},
			// 获取代缴费记录
			getUserRecord(){
				var that = this
				if(that.id == ''){
					var data = {
						user_id:that.userInfo.id,
						status:0,
					}
				}else{
					var data = {
						id:that.id
					}
				}
				
				Api.getUserRecord(data).then(res=>{
					console.log('获取成功',res);
					that.detail = res.data;
					// console.log(that.detail.length)
				})
			},
			
			// 创建订单
			createOrder(){
				var that = this
				console.log(that.type)
				var data = {
					user_id:that.userInfo.id,
					channel_type:that.type,
					pay_record_id:that.detail.id
				}
				
				Api.createOrder(data).then(res=>{
					console.log('订单创建成功',res)
					window.location.href = res.data.pay_url
				})
			},
			// 查看历史缴费
			goPayList(){
				uni.navigateTo({
					url:"./payList"
				})
			}
			
	}
}
</script>

<style lang="scss">
	//::v-deep .u-tabbar__content__item-wrapper {
	//	height: 120rpx;
	//	line-height: 120rpx;
	//}
	.frame{
		margin-top: 45vh;
		text-align: center;
		font-size: 30rpx;
	}
	.warp{
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.warp_text{
		// margin-top: 20rpx;
		font-size: 30rpx;
		color:white;
	}
</style>
